<template>
  <div style="text-align: center">
    <Row :gutter="10" style="margin-top:10px;">
      <Col span="8"
            >
      <div id="myChart"
           :style="{width: '98%', height: '360px'}" class="box-style echarts-box">
           <span class="span-color">待办事件</span>
           <p style="display: inline-block;text-align: center;position: absolute;top: 30%;left: 40%;">当前待办事件</p>
           <p style="display: inline-block;text-align: center;position: absolute;top: 50%;left: 40%;font-size: 40px;">{{data}}个</p>
      </div>
      </Col>
      <Col span="8">
          <div id="myChart1" class="echarts-box" v-if='this.pie.length > 0' :style="{width: '98%', height: '360px'}">
           </div>
           <div class="typeSanBox echarts-box" v-else >
               <div>
                   <img src="../../../assets/images/process-no-data.png" />
                   <span>暂无数据</span>
               </div>
           </div>
      </Col>
      <Col span="8"
           >
      <div id="myChart2"
           :style="{width: '98%', height: '360px'}" class="box-style echarts-box">
          <span class="span-color">逾期事件</span>
          <p style="display: inline-block;text-align: center;position: absolute;top: 30%;left: 40%;">当前逾期事件</p>
          <p style="display: inline-block;text-align: center;position: absolute;top: 50%;left: 40%;font-size: 40px;color:red">{{data2}}个</p>
      </div>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  props: ['pie','data','data2'],
  data() {
    return {
    }
  },
  mounted() {
    if(this.pie.length > 0) {
      this.pieChart()
    }

  },
  methods: {
    pieChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '待办预警',
          subtext: '',
          left: 'left',
          textStyle:{
              fontWeight:'bold',
              color:'#697786',
              fontSize:14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: '80',
          right: '20',
          data: this.pie.length> 0 ? ['红牌预警', '蓝牌预警', '黄牌预警', '橙牌预警'] : []
        },
        series: [
          {
            name: '待办预警',
            type: 'pie',
            radius: ['35%', '50%'], //设置饼图大小
            center: ['40%', '50%'], //设置饼图位置
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '0',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.pie.length> 0 ? [
              { value: this.pie[0], name: '红牌预警', itemStyle: { color: '#E8684A' } },

              { value: this.pie[2], name: '黄牌预警', itemStyle: { color: '#F6BD16' } },
              { value: this.pie[1], name: '蓝牌预警', itemStyle: { color: '#5B8FF9' } },
              { value: this.pie[3], name: '橙牌预警', itemStyle: { color: '#FFA500' } },
            ] : []
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
#myChart {
  width: 100%;
}
.echarts-box {
  background: rgba(0, 59, 152, 0.02);
}

.box-style {
  padding: 0px
}
.span-color {
  float: left;
  font-weight:bold;
  color:#697786;
  font-size:14px;
}
</style>